iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
Modern Web

給心理人的前端網頁開發系列 第 19

[給心理人的前端網頁開發] 19 關卡三:網路實驗 - jsPsych Hello World

  • 分享至 

  • xImage
  •  

前面提到了實驗是什麼、以及網路實驗的好處。今天要來用 jsPsych 這個前端套件,來寫一個網路實驗 Hello World。

一、前端套件是啥

在網頁這技術剛出來時(約 1991 年),其實只有 HTML 的部分。JavaScript 在 1995 年時出現,而 CSS 大概在 2000 年後才有比較多的開發者在使用。

在網頁開發這領域剛出現時,只要掌握前端三語言:HTML、CSS、JavaScritp,就可以開始開發了。但時至今日,前端開發已經不是這麼簡單的事情了:還會需要另外了解許多能協助開發的工具,例如前端套件。

打個比方。一般人為了通話或上網需求,會購入 iPhone 或安卓手機,這時我們會獲得一台裸機的手機。但這時,我們可能對手機有更多的需求,例如讓手機變好看、防止撞擊、聽音樂。於是我們購入掛飾、手機殼、無線耳機等配件。

在前端開發的世界也是如此。幾十年前,網頁開發者可能只是想讓網頁上有東西能顯示,所以只需要簡單的 HTML 就好。但現在,我們使用的網頁有各式各樣的功能,例如搜尋、電商、部落格。不是說這些功能不能用單純的 HTML、CSS、JavaScript 所完成,只是所耗費的時間會是難以估計的多。

為了時間、為了 CP 值、為了網頁開發者的肝,我們需要現成的工具幫助開發。關卡三因為需求是寫網路心理學實驗,所以我們就找這方面的工具:jsPsych,我們將這類型的工具稱之為套件 (package)。因為它就像是一個工具箱,可能從裡面拿出很多的小工具出來使用。

接下來介紹 jsPsych 這個套件。

二、jsPsych 套件介紹

jsPsych 的官網在這:jsPsych

jsPsych 的介紹頁面是這樣寫的:

jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser.

Experiments in jsPsych are created using plugins. Each plugin defines different kinds of events, like showing an image on the screen, and collects different kinds of data, like recording which key was pressed at which time. You can use the plugins that are included with jsPsych, use plugins that are developed by community members in the contrib repository, or create your own plugins. By assembling different plugins together into a timeline, it is possible to create a wide range of experiments.

不負責翻譯:

jsPsych 是一個為了建立行為實驗而誕生的 JavaScript 框架(可以理解為套件、工具),它可以跑在瀏覽器上。

我們會用 jsPsych 的 plugin 去建立實驗。每個 plugin 有不同的事件,像是在螢幕上秀出圖片、收集資料、紀錄在何時按了什麼按鍵 …

還是有點抽象對吧?直接寫個 Hello World 練手一下吧

三、jsPsych 的 Hello World

這裡是官方的 Hello World 教學

這裡是我將 Hello World 範例寫在 CodeSandBox 的連結

請試著照官方教學的 Option 1: Using CDN-hosted scripts 做看看。或是照著 CodeSandBox 的範例依樣照葫蘆。這是今天的目標:讓網頁上出現 Hello World 這句話。

<!DOCTYPE html>
<html>
  <head>
    <title>My experiment</title>
    <script src="https://unpkg.com/jspsych@7.0.0"></script>
    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
    <link
      href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body></body>
  <script>
    const jsPsych = initJsPsych();

    const hello_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "Hello world!"
    };
    const hello2_trial = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "Hello world2!"
    };

    jsPsych.run([hello_trial, hello2_trial]);
  </script>
</html>

小結

今天介紹了套件是什麼,以及介紹了 jsPsych 是能用來建立行為實驗並能在瀏覽器上跑的工具,並建立了一個 Hello 範例。明天將進一步解說這 Hello World 做了什麼事情。


上一篇
[給心理人的前端網頁開發] 18 關卡三:網路心理學實驗 - 實驗方法介紹
下一篇
[給心理人的前端網頁開發] 20 關卡三:網路實驗 - jsPsych Hello World 解說
系列文
給心理人的前端網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言